<%@include file="/common/CHeader.jsp" %>
<%@page pageEncoding="UTF-8" %>
<body>
<div class="container-fluid">
    <div class="row-fluid">
        <!-- block -->
        <div id="app"  class="block">
            <div class="block-content collapse in">
                            <div class="col-md-12" style="margin-bottom: 10px;padding-left: 0;padding-right:0">
                                    <div class="col-md-3" style="padding-left: 0"> <input class="form-control" v-model="username" type="text"  placeholder="输入账号"></div>
                                    <div class="col-md-3">   <input class="form-control" v-model="mobilephone" type="text"  placeholder="手机号"></div>&nbsp;
                                    <button v-on:click="clickpage('search',$event)" class="btn btn-primary">搜索</button>
                                    <a href="<%=basePath %>user/add" class="pull-right">
                                        <button class="btn btn-primary">新增用户</button>
                                    </a>
                                </div>
                        <table  cellpadding="0" cellspacing="0" border="0"
                               class="table table-striped table-bordered dataTable" id="example2"
                               aria-describedby="example2_info">
                            <thead>
                            <tr>
                                <th></th>
                                <th><spring:message code="user.loginaccount"/></th>
                                <th><spring:message code="user.fullname"/></th>
                                <th><spring:message code="user.mobile"/></th>
                                <th><spring:message code="user.email"/></th>
                                <th><spring:message code="user.role"/></th>
                                <th formatter="editFormat"><spring:message code="opt.edit"/></th>
                            </tr>
                            </thead>
                            <tbody>
                            <tr v-for="(user,index) in users">
                                <td>{{index+1}}</td>
                                <td>{{user.username}}</td>
                                <td>{{user.password}}</td>
                                <td>{{user.mobilephone}}</td>
                                <td>{{user.sex}}</td>
                                <td>{{user.address}}</td>
                                <td><a v-bind:href="'<%=basePath %>user/edit?userId='+user.userId"><span class="label label-primary">编辑</span></a>
                                    <a href="#" @click="deleteUser(user.userId)"><span class="label label-primary">删除</span></a>
                                </td>
                            </tr>
                            </tbody>
                        </table>
                        <div>
                            <div class="span6 pull-left">
                                <div class="dataTables_length">
                                    <label>
                                        <select v-model="pageLength" @change="clickpage('select',$event)"
                                                name="pagelength" class="form-control selectpicker">
                                            <option v-for="option in pageOptions" v-bind:value="option.value">
                                                {{option.text}}
                                            </option>
                                        </select>
                                    </label>
                                    <span class="label label-primary" style="height: 20px;line-height: 20px">共{{pages.count}}条记录</span>
                                </div>
                            </div>
                            <div class="span6 pull-right">
                                <div class="dataTables_paginate paging_bootstrap pagination" style="margin:0px;display: block">
                                    <ul class="pagination pagination-sm pull-right" style="margin:0px">
                                        <template v-if='pages.current===1'>
                                            <li class="prev disabled">
                                                <a href="#" @click="clickpage('priv',$event)">上一页</a>
                                            </li>
                                        </template>
                                        <template v-else>
                                            <li class="prev">
                                                <a href="#" @click="clickpage('priv',$event)">上一页</a>
                                            </li>
                                        </template>

                                        <template v-for="n in pages.total">
                                            <template v-if="n===pages.current">
                                                <li class="active" >
                                                    <a href="#">{{n}}</a>
                                                </li>
                                            </template>
                                            <template v-else>
                                                <li>
                                                    <a href="#" @click="clickpage('change',$event)">{{n}}</a>
                                                </li>
                                            </template>
                                        </template>

                                        <template v-if="pages.current-pages.total!=0">
                                            <li class="next"><a href="#" @click="clickpage('next',$event)">下一页</a></li>
                                        </template>

                                    </ul>
                                </div>
                            </div>

                </div>
            </div>
        </div>
        <!-- /block -->
    </div>


</div>
<%--<shiro:user>--%>
    <%--<shiro:hasPermission name="user:addUser">--%>
        <%--<div>管理员才能看见</div>--%>
    <%--</shiro:hasPermission>--%>
<%--</shiro:user>--%>
<%--<shiro:hasPermission name="user:addUser">--%>
    <%--<div>addUser管理员才能看见</div>--%>
<%--</shiro:hasPermission>--%>
<%--<shiro:hasRole name="admin">--%>
    <%--<div>admin</div>--%>
<%--</shiro:hasRole>--%>
<%--<shiro:guest>--%>
    <%--<div>guest</div>--%>
<%--</shiro:guest>--%>
<%--<shiro:user>--%>
    <%--<div>user</div>--%>
<%--</shiro:user>--%>

<script>

    var vm = new Vue({
        el: '#app',
//需要注入的模板的父元素
        data: {
            users: [],
            pages: [],
            currentPage: [],
            username:[],
            mobilephone:[],
            pageLength:'2',
            pageOptions:[
                {text:'每页2条',value:'2'},
                {text:'每页4条',value:'4'},
                {text:'每页10条',value:'10'},
                {text:'每页50条',value:'50'},
                {text:'每页100条',value:'100'}
            ]
        }, //end data
        created: function () {
            $.post("list.json", {"begin": 0, "length": this.pageLength}, function (data) {
                vm.pages = data.page;
//总页码
                vm.users = data.model;
//循环内容
                vm.currentPage = data.page.current;
//当前页(添加高亮样式)
            });
//end post
        }, //created
        methods: {
            /**
             *
             * @param type 点击绑定的类型，(前一页,后一页，被选择的页数，搜索)
             * @param event 绑定事件
             */
            clickpage: function (type,event) {
                var currentPage,begin,para,lenth;
                currentPage = parseInt(this.currentPage); //取当前页
                lenth = parseInt(this.pageLength);

                //前一页 后一页 搜索，前一页取默认就行 所以不判断
                switch (type){
                    case "priv":
                        currentPage = currentPage-2; //取前一页
                        currentPage<0 ? currentPage=0 :currentPage;
                        break;
                    case "search":
                        currentPage = 0; //搜索归零起始页面
                        break;
                }

                begin = currentPage*lenth;  //计算数据开始位置，

                switch (type){
                    case "change"://选择页面判断
                        currentPage = $(event.currentTarget).text();
                        begin = (parseInt(currentPage)-1)*lenth;
                        break;
                    case "select": //更换页面数量
                        begin = this.pages.begin;
                        break;
                }

                if(this.mobilephone.length <=0){
                    this.mobilephone = [];
                }
                if(this.username.length <=0){
                    this.username = [];
                }
                para = {
                    "begin": begin,
                    "length": lenth,
                    "username":this.username,
                    "mobilephone":this.mobilephone
                };
                $.post("list.json",para, function (data) {
                    vm.users = data.model;
                    vm.pages = data.page;
                    vm.currentPage = data.page.current;
                }); //end post,返回的数据= （开始位置，每页显示的条数)
            },//end method
            deleteUser:function (userId) {
                $.post("del.json",{"userId":userId}, function (data) {
                    console.log('执行删除动作');
                });
            }
        }
    }); //end vue

</script>
</body>
</html>

